<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 编码规范 | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/20.a0711b97.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/13.20c94e2c.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/15.fc48fa10.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/18.d89ca224.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/24.a88ce84e.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/29.60c8dbe1.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>规范</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/standard/" aria-current="page" class="sidebar-link">目标</a></li><li><a href="/standard/HTML.html" class="sidebar-link">HTML 编码规范</a></li><li><a href="/standard/CSS.html" aria-current="page" class="active sidebar-link">CSS 编码规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/standard/CSS.html#_1-命名规范" class="sidebar-link">1 命名规范</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_2-代码风格" class="sidebar-link">2 代码风格</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_3-通用" class="sidebar-link">3 通用</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_4-值与单位" class="sidebar-link">4 值与单位</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_5-文本排版" class="sidebar-link">5 文本排版</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_6-变换与动画" class="sidebar-link">6 变换与动画</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_7-媒体查询" class="sidebar-link">7 媒体查询</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_8-兼容性" class="sidebar-link">8 兼容性</a></li><li class="sidebar-sub-header"><a href="/standard/CSS.html#_9-代码注释" class="sidebar-link">9 代码注释</a></li></ul></li><li><a href="/standard/JavaScript.html" class="sidebar-link">JavaScript 编码规范</a></li><li><a href="/standard/VUE.html" class="sidebar-link">Vue 编码规范</a></li><li><a href="/standard/Markdown.html" class="sidebar-link">Markdown 语法说明</a></li><li><a href="/standard/Commit.html" class="sidebar-link">Git Commit 规范指南</a></li><li><a href="/standard/JSON.html" class="sidebar-link">JSON 数据传输标准</a></li><li><a href="/standard/CopyWriter.html" class="sidebar-link">文案风格指南</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-编码规范"><a href="#css-编码规范" class="header-anchor">#</a> CSS 编码规范</h1> <h2 id="_1-命名规范"><a href="#_1-命名规范" class="header-anchor">#</a> 1 命名规范</h2> <p>该命名规范主要解决以下问题：</p> <ul><li>从类名可以清晰区分出其功能作用，使页面结构清晰【命名空间、标识符】；</li> <li>以组件、模块的思想去写一个区块的结构，强化结构的模块化【BEM 模块思想】；</li> <li>减少多人合作、项目耦合等情况下的命名冲突【命名空间】；</li></ul> <h3 id="_1-1-命名思想"><a href="#_1-1-命名思想" class="header-anchor">#</a> 1.1 命名思想</h3> <p>项目如果没使用样式局部作用域框架（如 vue），则使用 BEM 命名规则。</p> <p><strong>【强制】</strong> 区块、模块、组件等一个整个的结构遵循 BEM 命名思想；</p> <p>当你能确定组件内最后一级的结构不会再发生变化时，最后一级可省略类名，使用两层嵌套；</p> <ul><li><code>.block</code>  代表了更高级别的抽象或组件；</li> <li><code>.block__element</code>  代表 <code>.block</code>  的后代，用于形成一个完整的 <code>.block</code>  的整体；</li> <li><code>.is-</code>  |  <code>.has-</code>  |  <code>.ext-</code>  代表 <code>.block</code>  的修饰符，<strong>不使用双中划线 <code>--</code></strong>。</li></ul> <p>相关链接：</p> <ul><li><a href="http://segmentfault.com/a/1190000000391762" target="_blank" rel="noopener noreferrer">BEM— 源自 Yandex 的 CSS 命名方法论<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="http://bem.info/" target="_blank" rel="noopener noreferrer">BEM 官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="_1-2-多单词连接"><a href="#_1-2-多单词连接" class="header-anchor">#</a> 1.2 多单词连接</h3> <p><strong>【强制】</strong> 用中划线连接多个单词，例如： <code>news-list</code> ；</p> <h3 id="_1-3-命名空间"><a href="#_1-3-命名空间" class="header-anchor">#</a> 1.3 命名空间</h3> <p><strong>【推荐】</strong> 在合适的地方使用命名空间；</p> <ul><li><strong>状态</strong>：以 <code>is</code>  为命名空间，<strong>表示动态的、具有交互性质的状态</strong>，例如： <code>.is-open</code> 、 <code>.is-active</code> 、 <code>.is-selected</code>  等；</li> <li><strong>组件</strong>：以 <code>ui</code>  或者 <code>mod</code>  为命名空间，<strong>表示可复用、移植的组件模块</strong>，例如： <code>.ui-slider</code> 、 <code>.mod-drop-menu</code>  等；</li> <li><strong>扩展</strong>：以 <code>ext</code>  为命名空间，<strong>表示对组件基类的视觉形态的扩展</strong>，例如： <code>.ext-cover</code>  等；</li></ul> <h3 id="_1-4-区块命名"><a href="#_1-4-区块命名" class="header-anchor">#</a> 1.4 区块命名</h3> <p><strong>【推荐】</strong> 一般区块都可以划分为头部、身体和尾部，因此建议给你的区块分别以  <code>hd</code> 、 <code>bd</code> 、 <code>ft</code>  来划分；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.ui-card__hd</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.ui-card__bd</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.ui-card__ft</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="附-命名示例"><a href="#附-命名示例" class="header-anchor">#</a> 附：命名示例</h4> <p><img src="/imgs/standard/css/css-name.jpg" alt="命名示例"></p> <h2 id="_2-代码风格"><a href="#_2-代码风格" class="header-anchor">#</a> 2 代码风格</h2> <h3 id="_2-1-缩进"><a href="#_2-1-缩进" class="header-anchor">#</a> 2.1 缩进</h3> <p><strong>【建议】</strong> 使用 <strong>2</strong> 个空格做为一个缩进层级，不允许使用 <strong>tab</strong> 字符；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-2-空格"><a href="#_2-2-空格" class="header-anchor">#</a> 2.2 空格</h3> <p><strong>【强制】</strong> 选择器 与  <code>{</code> 之间必须包含空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span><span class="token punctuation">{</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【强制】</strong> <code>&gt;</code> 、 <code>+</code> 、 <code>~</code>  选择器的两边各保留一个空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">main&gt;nav</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">label+input</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">input:checked~button</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #69C<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">main &gt; nav</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">label + input</span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">input:checked ~ button</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #69C<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【强制】</strong> 属性名 与之后的  <code>:</code>  之间不允许包含空格，  <code>:</code>  与 属性值 之间必须包含空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token property">margin</span> <span class="token punctuation">:</span>0<span class="token punctuation">;</span>

<span class="token comment">/* Better */</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div><p><strong>【强制】</strong> 列表型属性值 书写在单行时， <code>,</code>  后必须跟一个空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>128<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.3<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* Better */</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 128<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_2-3-选择器"><a href="#_2-3-选择器" class="header-anchor">#</a> 2.3 选择器</h3> <p><strong>【建议】</strong> 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.post, .page, .comment</span> <span class="token punctuation">{</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.post,
.page,
.comment</span> <span class="token punctuation">{</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_2-4-属性"><a href="#_2-4-属性" class="header-anchor">#</a> 2.4 属性</h3> <p><strong>【强制】</strong> 属性定义必须另起一行；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【强制】</strong> 属性定义后必须以分号结尾；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_3-通用"><a href="#_3-通用" class="header-anchor">#</a> 3 通用</h2> <h3 id="_3-1-选择器"><a href="#_3-1-选择器" class="header-anchor">#</a> 3.1 选择器</h3> <p><strong>【强制】</strong> 如无必要，不得为 <code>id</code> 、 <code>class</code>  选择器添加 <em>类型选择器</em> 进行限定；</p> <p>在性能和维护性上，都有一定的影响。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">dialog#error,
p.danger-message</span> <span class="token punctuation">{</span>
  <span class="token property">font-color</span><span class="token punctuation">:</span> #c00<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">#error,
.danger-message</span> <span class="token punctuation">{</span>
  <span class="token property">font-color</span><span class="token punctuation">:</span> #c00<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【建议】</strong> 选择器的嵌套层级应该不大于 <strong>3</strong> 级，位置靠后的限定条件应可能精确；</p> <p>在性能和维护性上，都有一定的影响。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.comment ul li a span</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">#top-hero .hero-avatar li.avatar .pic em</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.comment .date</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token selector">#top-hero .pic em</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><h3 id="_3-2-属性"><a href="#_3-2-属性" class="header-anchor">#</a> 3.2 属性</h3> <h3 id="_3-2-1-属性书写顺序"><a href="#_3-2-1-属性书写顺序" class="header-anchor">#</a> 3.2.1 属性书写顺序</h3> <p><strong>【建议】</strong> 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model &gt; Box Model &gt; Typographic &gt; Visual 的顺序书写，以提高代码的可读性。</p> <ol><li>Positioning Model 布局方式、位置；相关属性包括： <code>position / top / right / bottom / left / z-index / display / float / ...</code></li> <li>Box model 盒模型；相关属性包括： <code>width / height / padding / margin / border / overflow / ...</code></li> <li>Typographic 文本排版；相关属性包括： <code>font / line-height / text-align / word-wrap / ...</code></li> <li>Visual 视觉外观；相关属性包括： <code>color / background / list-style / transform / animation / transition / ...</code></li> <li>如果包含 content 属性，应放在最前面；</li></ol> <p>Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。</p> <p>详情资料 <a href="https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js#L36" target="_blank" rel="noopener noreferrer">Twitter 的 strictPropertyOrder<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="_3-2-2-属性引号"><a href="#_3-2-2-属性引号" class="header-anchor">#</a> 3.2.2 属性引号</h3> <p><strong>【强制】</strong> 属性选择器中的值必须用双引号包围。不允许使用单引号，不允许不使用引号。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">article[character='juliet']</span> <span class="token punctuation">{</span>
  <span class="token property">voice-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Vivien Leigh&quot;</span><span class="token punctuation">,</span> victoria<span class="token punctuation">,</span> female
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">article[character=&quot;juliet&quot;]</span> <span class="token punctuation">{</span>
  <span class="token property">voice-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Vivien Leigh&quot;</span><span class="token punctuation">,</span> victoria<span class="token punctuation">,</span> female
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_3-2-3-属性简写"><a href="#_3-2-3-属性简写" class="header-anchor">#</a> 3.2.3 属性简写</h3> <p>简写形式可以在一定程度上压缩样式，但并不意味着你可以对所有可以简写的属性声明都使用简写。过度使用简写形式的属性声明会导致代码混乱，会对属性值带来不必要的覆盖从而引起意外的副作用，并且不能充分利用 CSS 的继承。常见的滥用简写属性声明的情况如下：</p> <ul><li><code>padding</code></li> <li><code>margin</code></li> <li><code>font</code></li> <li><code>background</code></li> <li><code>border</code></li> <li><code>border-radius</code></li></ul> <p>如果你只需定义其中的一两个属性，而不是全部，尽量分开来写：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>image.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
  <span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 0 10px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>image.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px 3px 0 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_4-值与单位"><a href="#_4-值与单位" class="header-anchor">#</a> 4 值与单位</h2> <h3 id="_4-1-文本"><a href="#_4-1-文本" class="header-anchor">#</a> 4.1 文本</h3> <p><strong>【强制】</strong> 文本内容必须用双引号包围，不允许使用单引号；</p> <p>文本类型的内容可能在选择器、属性值等内容中。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">html[lang|=zh] q:before</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Microsoft YaHei'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'“'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">html[lang|=&quot;zh&quot;] q:after</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;“&quot;</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-2-数值"><a href="#_4-2-数值" class="header-anchor">#</a> 4.2 数值</h3> <p><strong>【强制】</strong> 当数值为 <strong>0 - 1</strong> 之间的小数时，省略整数部分的 <strong>0</strong>；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> .8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-3-长度"><a href="#_4-3-长度" class="header-anchor">#</a> 4.3 长度</h3> <p><strong>【强制】</strong> 长度为 <strong>0</strong> 时须省略单位 (也只有长度单位可省)；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0px 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-4-url"><a href="#_4-4-url" class="header-anchor">#</a> 4.4 url()</h3> <p><strong>【强制】</strong> url () 函数中的路径不加引号；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;bg.png&quot;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>bg.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-5-颜色"><a href="#_4-5-颜色" class="header-anchor">#</a> 4.5 颜色</h3> <p><strong>【强制】</strong> RGB 颜色值必须使用十六进制记号形式  <code>#rrggbb</code> ，不允许使用  <code>rgb()</code> ，带有 alpha 的颜色信息可以使用  <code>rgba()</code> ；颜色值不允许使用命名色值；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>128<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 128<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 128<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> #008000<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【建议】</strong> 颜色值中的英文字符采用小写，至少要保证同一项目内一致；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #0073AA<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #0073aa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-6-2d位置"><a href="#_4-6-2d位置" class="header-anchor">#</a> 4.6 2D 位置</h3> <p><strong>【强制】</strong> 必须同时给出水平和垂直方向的位置；</p> <p>2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。 <a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" target="_blank" rel="noopener noreferrer">background-position 属性值的定义<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token comment">/* 50% 0% */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> center top<span class="token punctuation">;</span> <span class="token comment">/* 50% 0% */</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_5-文本排版"><a href="#_5-文本排版" class="header-anchor">#</a> 5 文本排版</h2> <h3 id="_5-1-字体族"><a href="#_5-1-字体族" class="header-anchor">#</a> 5.1 字体族</h3> <p><strong>【强制】</strong> <code>font-family</code>  属性中的字体族名称应使用字体的<strong>英文</strong> Family Name，其中如有空格，须放置在引号中；</p> <p>常见的字体族名称如下：</p> <table><thead><tr><th style="text-align:left;">字体</th> <th style="text-align:left;">操作系统</th> <th style="text-align:left;">Family Name</th></tr></thead> <tbody><tr><td style="text-align:left;">宋体 (中易宋体)</td> <td style="text-align:left;">Windows</td> <td style="text-align:left;">SimSun</td></tr> <tr><td style="text-align:left;">黑体 (中易黑体)</td> <td style="text-align:left;">Windows</td> <td style="text-align:left;">SimHei</td></tr> <tr><td style="text-align:left;">微软雅黑</td> <td style="text-align:left;">Windows</td> <td style="text-align:left;">Microsoft YaHei</td></tr> <tr><td style="text-align:left;">微软正黑</td> <td style="text-align:left;">Windows</td> <td style="text-align:left;">Microsoft JhengHei</td></tr> <tr><td style="text-align:left;">华文黑体</td> <td style="text-align:left;">Mac/iOS</td> <td style="text-align:left;">STHeiti</td></tr> <tr><td style="text-align:left;">冬青黑体</td> <td style="text-align:left;">Mac/iOS</td> <td style="text-align:left;">Hiragino Sans GB</td></tr> <tr><td style="text-align:left;">文泉驿正黑</td> <td style="text-align:left;">Linux</td> <td style="text-align:left;">WenQuanYi Zen Hei</td></tr> <tr><td style="text-align:left;">文泉驿微米黑</td> <td style="text-align:left;">Linux</td> <td style="text-align:left;">WenQuanYi Micro Hei</td></tr></tbody></table> <p><strong>【强制】</strong> <code>font-family</code>  应当遵循以下顺序：</p> <ol><li>西文字体在前，中文字体在后；</li> <li>效果佳 (质量高 / 更能满足需求) 的字体在前，效果一般的字体在后的顺序编写；</li> <li>最后必须指定一个通用字体族 (serif /sans-serif)；</li></ol> <p>详细说明可参考 <a href="http://www.zhihu.com/question/19911793/answer/13329819" target="_blank" rel="noopener noreferrer">如何保证网页的字体在各平台都尽量显示为最高质量的黑体？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>【强制】</strong> <code>font-family</code>  不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h1</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h1</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Arial<span class="token punctuation">,</span> <span class="token string">&quot;Microsoft YaHei&quot;</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_5-2-字重"><a href="#_5-2-字重" class="header-anchor">#</a> 5.2 字重</h3> <p><strong>【强制】</strong> <code>font-weight</code>  属性必须使用数值方式描述；</p> <p>CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。</p> <p>浏览器本身使用一系列<a href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight" target="_blank" rel="noopener noreferrer">启发式规则<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>来进行匹配，在 &gt;700 时一般匹配字体的 Regular 字重，&gt;=700 时匹配 Bold 字重。</p> <p>但已有浏览器开始支持 =600 时匹配 Semibold 字重 (<a href="http://justineo.github.io/slideshows/font/#/3/15" target="_blank" rel="noopener noreferrer">见此表<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)，故使用数值描述增加了灵活性，也更简短。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_6-变换与动画"><a href="#_6-变换与动画" class="header-anchor">#</a> 6 变换与动画</h2> <p><strong>【强制】</strong> 使用  <code>transition</code>  定义属性时应遵循以下顺序：</p> <ol><li><code>[ transition-property ]</code> ：检索或设置对象中的参与过渡的属性；</li> <li><code>[ transition-duration ]</code> ：检索或设置对象过渡的持续时间；</li> <li><code>[ transition-timing-function ]</code> ：检索或设置对象中过渡的动画类型；</li> <li><code>[ transition-delay ]</code> ：检索或设置对象延迟过渡的时间；</li></ol> <p><code>transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]</code></p> <p>如果顺序错乱，在某些安卓浏览器上会让动画失效。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> color .2s 0 ease-in<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>【建议】</strong> 尽可能在浏览器能高效实现的属性上添加过渡和动画：</p> <p>在可能的情况下应选择这样四种变换：</p> <ul><li><code>transform: translate(npx, npx);</code></li> <li><code>transform: scale(n);</code></li> <li><code>transform: rotate(ndeg);</code></li> <li><code>opacity: 0..1;</code></li></ul> <p>详见 <a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" target="_blank" rel="noopener noreferrer">High Performance Animations<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_7-媒体查询"><a href="#_7-媒体查询" class="header-anchor">#</a> 7 媒体查询</h2> <p><strong>【强制】</strong> <code>Media Query</code>  不得单独编排，必须与相关的规则一起定义；</p> <p>不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token comment">/* header styles */</span>
<span class="token comment">/* main styles */</span>
<span class="token comment">/* footer styles */</span>

<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>...<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/* header styles */</span>
  <span class="token comment">/* main styles */</span>
  <span class="token comment">/* footer styles */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token comment">/* header styles */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>...<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/* header styles */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* main styles */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>...<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/* main styles */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* footer styles */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>...<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/* footer styles */</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_8-兼容性"><a href="#_8-兼容性" class="header-anchor">#</a> 8 兼容性</h2> <h3 id="_8-1-属性前缀"><a href="#_8-1-属性前缀" class="header-anchor">#</a> 8.1 属性前缀</h3> <p><strong>【强制】</strong> 带私有前缀的属性由长到短排列，按冒号位置对齐；</p> <p>标准属性放在最后，按冒号对齐方便阅读与编辑。</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Not so great */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
  <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
  <span class="token property">-moz-transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Better */</span>
<span class="token selector">.selector</span> <span class="token punctuation">{</span>
  <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
      <span class="token property">-moz-transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
          <span class="token property">transition</span><span class="token punctuation">:</span> color .2s ease-in 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_8-2-hack"><a href="#_8-2-hack" class="header-anchor">#</a> 8.2 hack</h3> <p><strong>【建议】</strong> 如果有其他解决方案，请不要使用 hack；</p> <h2 id="_9-代码注释"><a href="#_9-代码注释" class="header-anchor">#</a> 9 代码注释</h2> <p>代码是由人编写并维护的。请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。</p> <h3 id="_9-1-单行注释"><a href="#_9-1-单行注释" class="header-anchor">#</a> 9.1 单行注释</h3> <p><strong>【强制】</strong> 星号与内容之间必须保留一个空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 新闻中心表格隔行变色 */</span>
</code></pre></div><h3 id="_9-2-多行注释"><a href="#_9-2-多行注释" class="header-anchor">#</a> 9.2 多行注释</h3> <p><strong>【强制】</strong> 星号要一列对齐，星号与内容之间必须保留一个空格；</p> <p>示例：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/**
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */</span>
</code></pre></div><h3 id="_9-3-文件注释"><a href="#_9-3-文件注释" class="header-anchor">#</a> 9.3 文件注释</h3> <p><strong>【强制】</strong> 文件顶部必须包含文件注释，用  <code>@file</code>  标识文件说明。星号要一列对齐，星号与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格；</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/**
 * @file: 文件概要描述
 * @author: author-name(mail-name@domain.com)
 *          author-name2(mail-name2@domain.com)
 * @update: 2015-04-29 00:02:45
 */</span>
</code></pre></div><ul><li><code>@update</code>  为可选项，建议每次改动都更新一下；</li> <li>当该业务项目主要由固定的一个或多个人负责时，需要添加 <code>@author</code>  标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人；</li></ul> <p>参考资料：</p> <ol><li><a href="http://codeguide.bootcss.com/" target="_blank" rel="noopener noreferrer">bootcss 编码规范<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/kejun/CSS-Code-Guideline" target="_blank" rel="noopener noreferrer">豆瓣 CSS Code Guideline<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://github.com/ecomfe/spec/blob/master/css-style-guide.md" target="_blank" rel="noopener noreferrer">spec css style guide<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ol></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/standard/HTML.html" class="prev">
        HTML 编码规范
      </a></span> <span class="next"><a href="/standard/JavaScript.html">
        JavaScript 编码规范
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/20.a0711b97.js" defer></script>
  </body>
</html>
